<script setup lang="ts">
import { TemplateUpdateForm } from '@/api/exam/template/types';
import { ProjectForm } from '@/api/exam/project/types';
import { addProject, cancelPublishProject, publishProject, updateProject } from '@/api/exam/project';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import InfoEdit from './edit.vue';
import InfoSetting from './setting.vue';
import InfoData from './data.vue';
import { ClickOutside as vClickOutside } from 'element-plus';
import InfoOverview from '@/views/exam/project/info/overview.vue';
import InfoChart from '@/views/exam/project/info/chart.vue';
import router from '@/router';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

interface Props {
  projectForm: any | ProjectForm;
  viewFlag: string;
}

const props = withDefaults(defineProps<Props>(), {
  projectForm: {
    survey: {
      children: []
    },
    setting: {
      answerSetting: {},
      submittedSetting: {},
      examSetting: {}
    }
  },
  viewFlag: 'Edit'
});

watch(() => props.projectForm, (val) => {
  projectForm.value = val;
  getUrl();
});
watch(() => props.viewFlag, (val) => {
  viewFlag.value = val;
});

const projectUrl = ref('');
const getUrl = () => {
  let url = window.location.host;
  projectUrl.value = 'http://' + url + '/s/' + props.projectForm.id;
};
const copyUrl = () => {
  navigator.clipboard.writeText(projectUrl.value);
  proxy?.$modal.notifySuccess('复制成功');
};
const projectForm = ref<ProjectForm>(props.projectForm);

const isInput = ref(false);
const handleBlur = () => {
  isInput.value = false;
};
const projectNameInputRef = ref<any>(null);
const toggleInput = () => {
  isInput.value = true;
  nextTick(() => {
    projectNameInputRef.value?.focus();
  });
};

const buttonRef = ref();
const popoverRef = ref();
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.();
};

const viewFlag = ref(props.viewFlag);
const emit = defineEmits(['back']);
const infoEditRef = ref<any>(null);
const handleBack = () => {
  emit('back');
  viewFlag.value = 'Edit';
  infoEditRef.value?.reset();
};
const switchLoading = ref(false);
const handleRelease = async () => {
  switchLoading.value = true;
  if (projectForm.value.status === '1') {
    await publishProject(projectForm.value.id);
    proxy?.$modal.notifySuccess('已开启');
  } else {
    await cancelPublishProject(projectForm.value.id);
    proxy?.$modal.notifySuccess('已关闭');
  }
  switchLoading.value = false;
};
const loading = ref(false);
const handleSubmit = async () => {
  loading.value = true;
  await updateProject(projectForm.value).finally(() => {
    loading.value = false;
  });
  proxy?.$modal.notifySuccess('修改成功');
};

const activeTab = ref('overview');

onMounted(() => {
  getUrl();
});
</script>

<template>
  <div>
    <el-header class="project-header">
      <a-flex justify="space-between" align="center">
        <a-flex justify="start" gap="small" class="w-33%">
          <el-tooltip content="返回">
            <a-button @click="handleBack" danger>
              <template #icon>
                <svg-icon icon-class="back" />
              </template>
            </a-button>
          </el-tooltip>
          <a-button v-if="!isInput" @click="toggleInput">{{ projectForm.name }}</a-button>
          <a-input v-if="isInput" ref="projectNameInputRef" class="w-300px" v-model:value="projectForm.name"
                   @blur="handleBlur" />
        </a-flex>
        <div class="drawer-tabs w-33%">
          <a-tabs
            tab-position="top"
            v-model:active-key="viewFlag"
            centered animated
            style="background-color: #FFFFFF;"
          >
            <a-tab-pane key="Edit">
              <template #tab>
                <div style="font-size: 16px">
                  <svg-icon icon-class="edit" />
                  <span class="ml-4">编辑项目</span>
                </div>
              </template>
            </a-tab-pane>
            <a-tab-pane key="Setting">
              <template #tab>
                <div style="font-size: 16px">
                  <svg-icon icon-class="setting" />
                  <span class="ml-4">项目设置</span>
                </div>
              </template>
            </a-tab-pane>
            <a-tab-pane key="Data">
              <template #tab>
                <div style="font-size: 16px">
                  <svg-icon icon-class="data" />
                  <span class="ml-4">查看数据</span>
                </div>
              </template>
            </a-tab-pane>
            <a-tab-pane key="Report">
              <template #tab>
                <div style="font-size: 16px">
                  <svg-icon icon-class="statistics" />
                  <span class="ml-4">统计报表</span>
                </div>
              </template>
            </a-tab-pane>
          </a-tabs>
        </div>
        <a-flex justify="end" gap="large" class="w-33%">
          <a-flex align="center">
            <el-text>允许提交 &nbsp</el-text>
            <a-switch v-model:checked="projectForm.status" @click="handleRelease"
                      :checked-value="'1'" :un-checked-value="'0'" :loading="switchLoading"
                      :un-checked-children="h(CloseOutlined)" :checked-children="h(CheckOutlined)" />
          </a-flex>
          <el-button ref="buttonRef" plain type="primary" round v-click-outside="onClickOutside">
            发放试卷
          </el-button>
          <el-popover
            ref="popoverRef"
            :virtual-ref="buttonRef"
            :width="500"
            trigger="click"
            title="发放试卷"
            virtual-triggering
          >
            <a-row :gutter="12">
              <a-col>
                <a-qrcode :value="projectUrl" />
              </a-col>
              <a-col>
                <a-flex vertical gap="large">
                  <a-input v-model:value="projectUrl" style="width: 300px" />

                  <a-button type="text" @click="copyUrl">复制链接</a-button>
                </a-flex>

              </a-col>
            </a-row>
          </el-popover>

          <el-button round plain type="success" @click="handleSubmit"
                     :loading="loading">保存
          </el-button>
        </a-flex>
      </a-flex>
    </el-header>
    <el-container class="project-wrapper">
      <info-edit v-if="viewFlag==='Edit'" ref="infoEditRef" :project-form="projectForm" />
      <info-setting v-if="viewFlag==='Setting'" :project-form="projectForm" />
      <info-data v-if="viewFlag==='Data'" :project-form="projectForm" />
      <el-main v-if="viewFlag==='Report'">
        <a-flex justify="space-between" gap="large" style="height: 100%">
          <a-tabs v-model:activeKey="activeTab" tab-position="left" stretch class="report-nav">
            <a-tab-pane key="overview">
              <template #tab>
                <a-flex align="center" vertical gap="small" class="report-nav-item">
                  <svg-icon icon-class="overview" class="nav-item-icon" />
                  <span>数据概览</span>
                </a-flex>
              </template>
            </a-tab-pane>
            <a-tab-pane key="chart">
              <template #tab>
                <a-flex align="center" vertical gap="small" class="report-nav-item">
                  <svg-icon icon-class="chart" class="nav-item-icon" />
                  <span>统计图表</span>
                </a-flex>
              </template>
            </a-tab-pane>

          </a-tabs>
            <info-overview v-if="activeTab==='overview'" :project-form="projectForm" />
            <info-chart v-if="activeTab==='chart'" :project-form="projectForm" />
        </a-flex>
      </el-main>

    </el-container>
  </div>
</template>

<style scoped lang="scss">

.report-nav {
  width: 104px;
  border-radius: 8px;
  padding: 12px 0;
  background: white;

}

.report-nav-item {
  span {
    font-size: 12px;
  }
}

.nav-item-icon {
  margin-top: 8px;
  font-size: 24px;
}
</style>
<style lang="scss">
.project-header {
  height: 50px;
  border-bottom: 1px solid #ebebeb;
}

.drawer-tabs {
  .ant-tabs-nav {
    margin-bottom: 0 !important;
  }
}

.project-wrapper {
  position: relative;
  background-color: rgb(245, 246, 250);
  height: calc(100vh - 50px);
  width: 100%;
}
</style>
